<template>
  <div class="container">
    <el-card>
      <div slot="header" class="clearfix">
        <strong style="font-size: 20px;margin-left: 1%">我教的课</strong>
        <el-button style="width: 10%;float: right;margin-right: 5%" type="primary" @click="dialogFormVisible = true"> <i class="el-icon-plus" style="margin-right: 1%"></i>添加课程</el-button>
      </div>
      <el-dialog title="课程" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="课程名称" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="班级名称" :label-width="formLabelWidth">
            <el-input v-model="form.className" autocomplete="off"></el-input>
          </el-form-item>
<!--          -->
          <el-form-item label="上课时间" :label-width="formLabelWidth">
            <el-select v-model="form.periodStart" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
            <el-select
                v-model="form.periodEnd"
                style="margin-left: 20px;"
                placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>

          </el-form-item>
<!--          -->
          <el-form-item label="开课时间" :label-width="formLabelWidth">
            <div class="block">
              <el-date-picker
                  v-model="courseTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(info,index) in courses " :key="info.id">
          <div style="margin-top: 4%; width: 90%" @click="gotoStatistic(info.id)">
            <el-card :body-style="{ padding: '0px' }">
              <img src="../../assets/img/home/course.jpg" class="image">
              <div style="padding: 14px;">
                <h3>{{info.title}}</h3>
                <div class="tex">{{info.periodStart}}-{{info.periodEnd}} 节</div>
                <div class="tex">{{info.startTime}}-{{info.endTime}}</div>
                <div class="tex">班级名称: {{info.className}}</div>
                <div class="tex">绑定码: {{info.flag}}</div>
                <div class="bottom clearfix">
                  <el-button type="text" class="button" @click="deleteCourse(info.id)">删除</el-button>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <div style="margin-top: 26px">
        <el-pagination
            background
            layout="total,prev,pager,next"
            :page-size="8"
            :total="size"
            @current-change="handleCurrentChange"
            @pre-click="handlePrev"
            @next-click="handleNext">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>

import {addCourse, deleteCourse, getAllCourse} from "../../network/Details/course";

export default {
  name: "TeacherCourse",
  data(){
    return {
      show:false,
      curIndex:-1,
      size:0,
      courses:[],
      curPage: 1,
      inputContent:'',
      username: window.sessionStorage.getItem("username"),
      options: [{
        value: 1,
        label: 1
      }, {
        value: 2,
        label: 2
      }, {
        value: 3,
        label: 3
      }, {
        value: 4,
        label: 4
      }, {
        value: 5,
        label: 5
      },
        {
          value: 6,
          label: 6
        },
        {
          value: 7,
          label: 7
        }],
      dialogFormVisible: false,
      courseTime:[],
      form: {
        title: '',
        className: '',
        periodStart: 0,
        periodEnd: 0,
        startTime:'',
        endTime:'',
        username: window.sessionStorage.getItem("username")
      },
      formLabelWidth: '120px',
    }
  },
  methods: {
    submit(){
     this.dialogFormVisible = false
      this.form.startTime = this.courseTime[0]
      this.form.endTime = this.courseTime[1]
     addCourse(this.form, 'post').then(res => {
       this.getAll(this.curPage)
       this.$message({
         type: 'success',
         message: '添加成功!'
       });
     });
    },
    deleteCourse(id){
     deleteCourse(id).then(res => {
       this.$message({
         type: 'success',
         message: '删除成功!'
       });
       this.getAll(1)
     })
   },
    gotoStatistic(id){
      this.$router.push({
        name:"CourseInfo",
        query:{
          id:id
        }
      })
    },
    handleCurrentChange(val) {
      this.curPage = val;
      this.getAll(val)
    },
    handlePrev(val){
      this.getAll(val)
    },
    handleNext(val){
      this.getAll(val)
    },
    getAll(page){
        getAllCourse(page, 8, window.sessionStorage.getItem("username")).then(res=>{
           console.log(res.data)
            this.size = res.data.total
            this.courses = res.data.records
        })
    }
  },
  created() {
       this.getAll(1)
  }

}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 80%;
  height: 200px;
  margin-top: 6%;
  border-radius: 10px;
  background: url("../../assets/img/home/course.jpg");
  background-size: auto 100%;

}
.e-icon{
  float: right;
}
.el-icon-edit:hover,.el-icon-delete-solid:hover {
  color: #409EFF;
}
.text{
  font-size: 20px;
}
.text:hover{
  color: #409EFF;
}
.box-card:hover{
  transform: translateY(-8px);
  transition: transform 0.2s;
}
.container{
  margin-top: 2%;
  max-width: 100%;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.tex{
  font-size: 13px;
  color: #C0C4CC;
}
.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
